<template>
  <Modal
    v-model="show"
    v-bind:title="modalTitle"
    :scrollable="true"
    class-name="vertical-center-modal"
    :mask-closable="false"
    @on-cancel="cancel"
  >
    <Form ref="cleanForm" :label-width="55">
      <!--照片-->
      <Table
        ref="selection"
        :columns="columnClean"
        :data="data"
        width="320"
        :loading="loading"
        @on-selection-change="selectChange"
      ></Table>
    </Form>
    <div slot="footer">
      <Button type="primary" @click="handleCancel" :disabled="loading">取消</Button>
      <Button type="primary" @click="handleSubmit" :disabled="loading">清空</Button>
    </div>
  </Modal>
</template>
<script>
import { cleanUserType } from "src/controllers/user";
import { cleanRecord } from "src/controllers/record";
import LC from "src/controllers/localConfig";

export default {
  name: "clean-modal",
  data: () => {
    return {
      show: false,
      modalTitle: "清除数据",
      loading: false,
      selection: [],
      columnClean: [
        { title: "数据内容", align: "left", key: "tag" },
        { title: "是否清空", type: "selection", width: 60, align: "center" }
      ],
      data: [
        {
          _checked: false,
          tag: "员工数据",
          clean: () => {
            return cleanUserType(0);
          }
        },
        {
          _checked: false,
          tag: "访客数据",
          clean: () => {
            return cleanUserType(2);
          }
        },
        {
          _checked: false,
          tag: "VIP数据",
          clean: () => {
            return cleanUserType(3);
          }
        },
        {
          _checked: false,
          tag: "陌生人数据",
          clean: () => {
            return cleanUserType(4);
          }
        },
        {
          _checked: false,
          tag: "历史记录",
          clean: () => {
            return cleanRecord();
          }
        },
        {
          _checked: false,
          tag: "缓存数据",
          clean: () => {
            return LC.cleanCache();
          }
        }
      ]
    };
  },
  created() {},
  methods: {
    showModal(row) {
      this.loading = false;
      this.show = true;
    },
    cancel() {
      this.show = false;
    },
    preview() {},
    selectChange(selection) {
      console.log(selection);
      this.selection = selection;
    },
    handleSubmit() {
      if (this.selection.length <= 0) {
        return this.handleCancel();
      }
      let msg = this.selection.map(item => item.tag).join("、");
      //   let msg = "";
      this.$Modal.confirm({
        title: "确认",
        content: "确认清除数据【" + msg + "】？",
        onOk: () => {
          // 删除基本信息
          this.loading = true;
          Promise.all(
            this.selection.map(item => {
              for (let i = 0; i < this.data.length; ++i) {
                if (item.tag == this.data[i].tag) {
                  return this.data[i].clean();
                }
              }
            })
          ).then(res => {
            this.loading = false;
            this.show = false;
            this.data.map(item => {
              item._checked = false;
            });
          });
        }
      });
    },
    handleCancel() {
      show = false;
      this.data.map(item => {
        item._checked = false;
      });
    }
  }
};
</script>